<template>
	<div class="SiteMonitoringDetailsDiv">
		<div class="comtop">
			<div class="comtop_title">
				<a-space>
					<span class="comtop_title_span1"> 返回列表<Icon icon="mingcute:right-line"
							style="color: #009688; font-size: 14px"></Icon></span>
					<span class="comtop_title_span2">{{titleList.stationName}}</span>
					<a-tag size="large" color="blue">
            <template v-if="titleList.stationType==0">城市公共</template>
            <template v-if="titleList.stationType==1">高速站</template>
            <template v-if="titleList.stationType==2">公交站</template>
            <template v-if="titleList.stationType==3">内部站</template>
            <template v-if="titleList.stationType==4">其他</template>
          </a-tag>
					<a-tag color="success">  
            <template v-if="titleList.stationStatus==1">运营</template>
            <template v-if="titleList.stationStatus==2">下线</template>
          </a-tag>
				</a-space>
				<div class="comtop_main">
					<img src="/@/assets/images/panoramicMonitoring/u35.jpg" alt="" />
					<div class="comtop_main_details">
						<a-row>
							<a-col class="comtop_main_details_ones" v-for="(item, idnex) in detailsones" :span="6">
								<!-- <div > -->
								<span class="oneslt"> {{ item.oneslt }}</span><span class="onsert">{{ item.onsert
									}}</span>
								<!-- </div> -->
							</a-col>
						</a-row>
					</div>
				</div>
			</div>
		</div>
		<div class="commain">
			<!-- <div class="commainSelect">
				<a-space :size="30">
					<a-range-picker style="width: 220px" :presets="rangePresets" @change="onRangeChange" />
					<div>充电桩：<a-select ref="select" v-model:value="value1" style="width: 120px" :options="options1" @focus="focus" @change="handleChange"></a-select></div>
				</a-space>
			</div> -->

			<a-tabs v-model:activeKey="activeKey" class="atabsdiv" size="large">
				<a-tab-pane key="1">
					<template #tab>
						<span>
							<Icon icon="mdi:electric-charger" style="color: #009688; font-size: 25px"></Icon>
							充电站监测
						</span>
					</template>
					<stationMonitor />
				</a-tab-pane>
				<a-tab-pane key="2">
					<template #tab>
						<span>
							<Icon icon="iconoir:ev-charge" style="color: #009688; font-size: 25px"></Icon>
							充电桩监测
						</span>
					</template>
					<stakeMonitor />
				</a-tab-pane>
				<a-tab-pane key="3">
					<template #tab>
						<span>
							<Icon icon="solar:monitor-camera-broken" style="color: #009688; font-size: 25px"></Icon>
							热成像监测
						</span>
					</template>
					<thermalMonitor />
				</a-tab-pane>
			</a-tabs>
		</div>
	</div>
</template>

<script lang="js" name="test-bizWarningInfo" setup>
import { ref, reactive, computed, unref,onMounted } from 'vue';
import stationMonitor from './tabsDiv/stationMonitor.vue';
import stakeMonitor from './tabsDiv/stakeMonitor.vue';
import thermalMonitor from './tabsDiv/thermalMonitor.vue';
import {getTitle,getStake} from '/@/api/panoramicMonitoring/SiteMonitoringDetails'
import { useRoute } from 'vue-router';
const route = useRoute();
const titleList = ref({
  stationName:'海南儋州市怡心花园一期CD区充电站',
  stationType:0,
  stationStatus:1
})

const stationId = route.query.stationId;
onMounted(() => {
  getData()
});

const getData = ()=>{
  getTitle({stationId:stationId}).then(res=>{
      titleList.value = res;
      detailsones.value[0].onsert = res.stationId;
      detailsones.value[1].onsert = res.stationOperator;
      detailsones.value[2].onsert = res.city;
      detailsones.value[3].onsert = res.totalPower;
      detailsones.value[4].onsert = res.dcNum;
      detailsones.value[5].onsert = res.acNum;
      detailsones.value[6].onsert = res.stationAddr;
  })
}
const activeKey = ref('1');
const detailsones = ref([
	{
		oneslt: '充电站编码',
		onsert: '0216026977',
	},
	{
		oneslt: '所属运营商',
		onsert: '青岛特锐德',
	},
	{
		oneslt: '所属城市',
		onsert: '海南-琼海',
	},
	{
		oneslt: '装机功率（千瓦）',
		onsert: '850',
	},
	{
		oneslt: '直流桩数',
		onsert: '4台-480千瓦',
	},
	{
		oneslt: '交流桩数',
		onsert: '15台-136千瓦',
	},
	{
		oneslt: '充电站地址',
		onsert: '海南儋州市怡心花园一期CD区西栋停车场',
	},
]);







</script>

<style lang="less" scoped>
:deep(.ant-picker),
:deep(.ant-input-number) {
	width: 100%;
}

:deep(.ant-tabs-tab .anticon) {
	margin-right: 0px;
}

:deep(.ant-tabs-tab-btn) {
	font-family: 'PingFangSC-Regular';
	font-weight: 600;
	font-style: normal;
	font-size: 20px;
	color: rgb(0, 0, 0);
}

.SiteMonitoringDetailsDiv {
	box-sizing: border-box;
	padding: 20px;
	background: white;
	min-width: 973px;

	.comtop {
		.comtop_title {
			&_span1 {
				color: #009688;
			}

			&_span2 {
				font-family: 'PingFangSC-Regular';
				font-weight: 600;
				font-style: normal;
				font-size: 28px;
				color: rgb(0, 0, 0);
			}

			:deep(.ant-tag) {
				font-size: 14px;
				margin-left: 10px;
				line-height: 25px;
				min-width: 90px;
				text-align: center;
			}

			.comtop_main {
				background-color: #f8f9f3;
				box-sizing: border-box;
				display: flex;
				margin: 20px 0;

				img {
					width: 141px;
					height: 97px;
					margin-top: -15px;
				}

				.comtop_main_details {
					margin-left: 20px;

					&_ones {
						display: flex;
						// justify-content: space-between;
						align-items: center;
						margin-top: 13px;

						.oneslt {
							font-family: 'PingFangSC-Regular';
							font-weight: 300;
							font-style: normal;
							font-size: 14px;
							color: rgba(94, 94, 94, 0.59);
							min-width: 70px;
						}

						.onsert {
							font-family: 'PingFangSC-Regular';
							font-weight: 600;
							font-style: normal;
							font-size: 14px;
							color: rgb(87, 87, 87);
							margin-left: 10px;
							white-space: nowrap;
						}
					}
				}
			}
		}
	}

}
</style>
